<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import {getCPULoadApi} from "../../api/cuoload.js";
const chartDom =ref([])
onMounted(() =>{
  initChart();
  getCPUData()
})
const  initChart = () => {
  for (let i =1; i <=16; i++) {
    var Dom =document.getElementById("cpu-"+ i)
    var myChart = echarts.init(Dom);
    chartDom.value.push(myChart)
  }
}
const CPUALLData =ref([])
const getCPUData = async()=>{
  let resp= await getCPULoadApi()
  let data=resp.data;
  for(let i=0;i<16;i++){
    if (!CPUALLData.value[i]){
      CPUALLData.value[i]=[]
    }
    if(CPUALLData.value[i].length>60){
      let arr =CPUALLData.value[i].slice(-60)
      arr.push(data[i])
      CPUALLData.value[i]=arr
    }else {
      CPUALLData.value[i].push(data[i])
    }
    CPUALLData.value[i].push(data[i]);
    drawCPULoad(i+1,CPUALLData.value[i])
  }
  await getCPUData()
}
const drawCPULoad = (cpuIndex, cpuData) => {

  var myChart =chartDom.value[cpuIndex-1]
  var option;
  option = {
    title:{text:'CPU'+cpuIndex},
    grid: {left:"0",right:"0",bottom:"0",top:"0"},
    xAxis: {
      show: false,
      type: 'category'
    },
    yAxis: {
      show:false,
      type: 'value',
      mix:0,
      max:1
    },
    series: [
      {
        data: cpuData,
        type: 'line',
        // smooth: true,
        smooth: false,
        symbol: 'none',
        areaStyle: {}
      }
    ]
  };
  option && myChart.setOption(option);
}

</script>

<template>
  <a-space wrap>
    <div :id="`cpu-${i}`"
         style="width: 240px;height: 240px; border: 1px solid black;"
         v-for="i in 16">
    </div>
  </a-space>

</template>

<style scoped>

</style>